<template>
	<view class="">
		<view v-if="detail.list">
			<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image :src="detail.img" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="flex justify-around">
				<view 
					v-for="(item,index) in detail.list" 
					:key="index"
					:class="['text-center padding-sm tab',{active:tabIdx==index}]" 
					@click="tabIdx=index"
				>
					<view class="">{{item.spec}}</view>
					<view class="">{{item.weight}}</view>
					<view class="">{{item.edible}}</view>
				</view>
			</view>
			<view class="padding fs-28 u-border-bottom">
				￥{{detail.list[tabIdx].price}}
			</view>
			<view class="padding fs-28 u-border-bottom">
				{{detail.list[tabIdx].ahead}}
				<text class="margin-lr">10cm*20cm</text>
				{{detail.list[tabIdx].edible}}
			</view>
			<view class="padding fs-28 u-border-bottom">
				{{detail.list[tabIdx].fittings}}
			</view>
			<view class="flex justify-around fixed padding-tb-sm">
				<button @click="addcart" class="cu-btn bg-brown lg">加入购物车</button>
				<button class="cu-btn bg-yellow lg">立即购买</button>
			</view>
		</view>
		<view class="text-center" v-else>暂无此商品详情</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail:{},
				tabIdx:0
			}
		},
		onLoad() {
			uni.getStorage({
				key:"goodata",
				success: (res) => {
					// console.log(res);
					this.detail = res.data;
				}
			});
			uni.setNavigationBarTitle({
				title:this.detail.name
			})
		},
		onUnload() {
			uni.removeStorage({
				key:"goodata"
			})
		},
		methods: {
			// 作用一样，三种写法不同
			/* ...mapMutations({'addcart':'addcart'})
			...mapMutations(['addcart']) */
			addcart(){
				this.$store.commit("addcart",{...this.detail,idx:this.tabIdx});
				uni.navigateTo({
					url:"./cart"
				})
			}
		}
	}
</script>
<!-- scss 才支持嵌套？ -->
<style lang="scss" scoped>
	.banner{
		height: 600upx;
		swiper-item{
			height: 600upx;
		}
		image{
			width: 100%;
			// height: 600upx;
		}
	}
	.tab{
		&.active{
			border-bottom: 4upx solid #fae456;
		}
	}

	.cu-btn.lg{
		width: 46%;
	}
</style>
